<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>产品管理</title>
	<!-- 引入jquery -->
	<script src="../day01/1-jquery.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
	<style>
		/* 初始化table样式 */
		table,
		th,
		td {
			border: 1px solid #ccc;
			border-collapse: collapse;
			text-align: center;
			line-height: 30px;
			width: 1200px;
			margin-top: 10px;
		}

		/* 初始化模态框遮罩样式 */
		.dialog {
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			top: 0;
			left: 0;
			line-height: 40px;
			/* 隐藏模态框 */
			display: none;
		}

		/* 初始化模态框样式 */
		.dialog .container {
			font-size: 18px;
			width: 60%;
			height: 400px;
			margin: calc((100vh - 400px)/2) auto;
			background-color: #fff;
		}

		.dialog .container .dialog_header {
			background-color: red;
		}

		.dialog .container .dialog_footer button {
			position: relative;
			left: 350px;
			display: inline-block;
			width: 50px;
		}
	</style>
	<script>
		$(function () {
			// 声明全局ajax请求基础路径
			var baseURL = "http://121.199.0.35:8002";
			// 声明一个全局user对象 
			var user = null;
			// 登录按钮:点击登录 获取token 存储起来 配置到ajax全局对象
			$('.login').click(function () {
				var obj = {
					username: "admin1",
					password: 123321
				};
				// 发送登录请求
				$.ajax({
					// 请求路径
					url: baseURL + '/user/login',
					// 请求方式
					method: "post",
					// 请求头
					headers: {
						"Content-Type": "application/json"
					},
					// 携带参数
					data: JSON.stringify(obj),
					// 成功回调
					success(res) {
						console.log(res);
						// 存储token
						sessionStorage.setItem('token', res.data.token);
						// 全局配置ajax请求 全部携带token
						$.ajaxSetup({
							headers: {
								"Authorization": sessionStorage.getItem('token')
							}
						});
						$('.load').trigger('click');
						// $('.load').trigger('click')
					},
					// 失败回调
					error(err) {
					}
				})
			})

			// 加载按钮 将所有产品信息展示到表格中
			// 1.获取产品信息 插入到tbody中
			// 声明成全局变量
			var obj = {
				page: 1,
				pageSize: 20
			}
			$('.load').click(function () {
				// 提供清空某一个元素内容方法 empty()
				$('tbody').empty();
				$.ajax({
					url: baseURL + "/product/pageQuery",
					method: "get",
					data: Qs.stringify(obj),
					success(res) {
						// console.log(res.data.list);
						// 遍历数组 动态生成tr 插入到tbody中
						// [{name,status,price},{},{}]
						res.data.list.forEach(function (item, index) {
							var newTr = `
								<tr>
									<td>${index + 1}</td>	
									<td>${item.id}</td>	
									<td>${item.name}</td>	
									<td>${item.price}</td>	
									<td>${item.status}</td>	
									<td>${item.category.name}</td>	
									<td><button class='toDelete' id='${item.id}'>删除</button><button item='${JSON.stringify(item)}' class='toEdit'>修改</button></td>	
								</tr>
							`
							$('tbody').append(newTr)
						})
					},
					error(err) {

					}
				})

			})

			// var name='zhangsan';
			// console.log('hello name');
			// // 模板字符串
			// console.log(`hello${name}`);

			// 删除按钮事件 事件代理 
			$('table tbody').on('click', '.toDelete', function () {
				var id = $(this).attr('id');
				// console.log(id);
				// 发送一个删除请求 根据id删除当前行的数据
				var result = confirm('确定删除吗?');
				if (result) {
					// 点击确定 继续删除 继续发送删除请求
					$.ajax({
						url: baseURL + "/product/deleteById",
						method: "get",
						// 第一个id是后端需要的参数 id
						// 第二个id是自己点击按钮获取得变量id
						data: { id: id },
						success(res) {
							// console.log(res);
							// 提示用户 删除成功
							alert(res.message)
							// 刷新页面 
							$('.load').trigger('click');
						},
						error(err) {

						}
					})
				} else {
					$('confirm').fadeOut()
				}
			})
			// $('.toDelete').click(function(){
			// 	var id=$(this).attr('id');
			// 	console.log(id);
			// })
			// 解决页面刷新数据丢失问题
			var token = sessionStorage.getItem('token');
			if (token) {
				$.ajaxSetup({
					headers: {
						'Authorization': token
					}
				})
				// 模拟点击加载数据
				$('.load').trigger('click')
			} else {
				// 假设token失效 
				$('.login').trigger('click');

			}

			// 给查询按钮绑定事件 点击查询 按照name查询
			$('.toSearch').click(function () {
				$('tbody').empty();
				// page pageSize name
				let temp = {
					...obj,
					name: $('input:first').val(),
					status: $('select:first').val(),
				};
				$.ajax({
					url: baseURL + "/product/pageQuery",
					method: "get",
					data: Qs.stringify(temp),
					success(res) {
						res.data.list.forEach(function (item, index) {
							console.log(item, typeof item);

							var newTr = `
								<tr>
									<td>${index + 1}</td>	
									<td>${item.id}</td>	
									<td>${item.name}</td>	
									<td>${item.price}</td>	
									<td>${item.status}</td>	
									<td>${item.category.name}</td>	
									<td><button class='toDelete' id='${item.id}'>删除</button><button>修改</button></td>	
								</tr>
							`
							$('tbody').append(newTr)
						})
					},
				})
			})

			// var obj={
			// 	name:'zhangsan',
			// 	age:12
			// };
			// console.log({...obj});


			// 给确定按钮绑定事件 
			// 1.获取用户输入的内容
			// 2.发送保存请求 将数据插入到数据库中
			// 3.提示用户保存成功 关闭模态框 刷新页面
			$('.submit').click(function () {
				// 获取用户输入得内容
				var name = $('input[name=name]').val();
				var status = $('input[type=radio]:checked').val();
				var price = $('input[name=price]').val();
				var description = $('textarea[name=description]').val()
				console.log(name, status, price, description);
				// 发送保存请求
				$.ajax({
					url: baseURL + "/product/saveOrUpdate",
					method: "post",
					// 前一个name是后端需要的参数
					// 后一个name是用户输入的值
					data: {
						// name:name,
						// status:status,
						// price:price,
						// description:description
						// es6对象属性简写形式 属性名和变量名重名 可以简写为属性名
						id: user ? user.id : "",
						name,
						status,
						price,
						description,
						productCategoryId: 9441
					},
					success(res) {
						console.log(res);
						// 保存成功
						// 1.关闭模态框
						$('.dialog').fadeOut();
						// 2.提示用户保存成功
						alert(res.message);
						// 3.刷新页面 局部数据刷新
						// location.reload()
						$('.load').trigger('click');

					},
					error(err) {

					}
				})
			})
			// 给新增按钮绑定事件
			$('.toAdd').click(function () {
				// 模态框显示
				$('.dialog').fadeIn();
				$('.dialog_header').html('新增产品信息');
				// 清空表单数据
				$('input[name=name]').val("");
				$('input[type=radio]').prop("checked", false);
				$('input[name=price]').val("");
				$('textarea[name=description]').val("");
			});
			// 给取消按钮绑定事件
			$('.cancel').click(function () {
				// 模态框隐藏
				$('.dialog').fadeOut()
			})

			// 给修改按钮绑定事件 事件代理
			$('table tbody').on('click', '.toEdit', function () {
				// 1.弹出模态框
				$('.dialog').fadeIn()
				// 2.点击哪一个修改按钮 获取当前行的数据
				user = $(this).attr('item');
				console.log(user, typeof user);
				user = JSON.parse(user);
				console.log(user);
				// 3.将当前行数据设置给表单信息
				$('input[name=name]').val(user.name);
				// 正常  下架 user.status
				$('input[type=radio][value=' + user.status + ']').prop("checked", true);
				$('input[name=price]').val(user.price);
				$('textarea[name=description]').val(user.description);
				// 4.修改模态框标题为修改产品信息
				$('.dialog_header').html('修改产品信息');
			})









		})
	</script>
</head>

<body>
	<!-- 按钮操作 -->
	<button class="login">登录</button>
	<button class="load">加载数据</button>
	<input type="text">
	<select name="status">
		<option value="正常">正常</option>
		<option value="下架">下架</option>
	</select>
	<button class="toSearch">查询</button>
	<button class="toAdd">新增</button>
	<!-- 表格展示数据 -->
	<table>
		<thead>
			<tr>
				<th>序号</th>
				<th>产品编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>状态</th>
				<th>所属栏目</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>

		</tbody>
	</table>
	<!-- 模态框  -->
	<div class="dialog">
		<div class="container">
			<!-- 头部 -->
			<div class="dialog_header">
				新增产品信息
			</div>
			<!-- 体部 -->
			<div class="dialog_center">
				<!-- 表单控件 -->
				<!-- 保存或者更新 
				name 
				price 
				status
				sescription -->
				<div>
					产品名称: <input type="text" name="name">
				</div>
				<div>
					状态: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常<input type="radio" name="status" value="正常">
					下架<input type="radio" name="status" value="下架">
				</div>
				<div>
					价格: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="price" id="">
				</div>
				<div>
					产品描述: <textarea name="description" cols="30" rows="10"></textarea>
				</div>
			</div>
			<!-- 尾部 -->
			<div class="dialog_footer">
				<button class="cancel">取消</button>
				<button class="submit">确定</button>
			</div>
		</div>
	</div>
</body>

</html>